<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
    <title>工厂基本信息</title>
    <link rel="icon" type="image/png" href="/img/icon.png">
    <script type="text/javascript" src="/h5/newall/newall.js"></script>
    <link rel="stylesheet" type="text/css" href="/h5/newall/newall.css">
</head>

<div class="mui-content-padded H5body basedata">
    <div class="topmsg">
        <p class="msgtext">注册填写/上传的信息越全面，客户信任度越高</p>
    </div>
    <MCform id="Form" fromapi="/api/app/call/getusers_zhiliangyaoqiu_gc"
            action="/api/app/call/setusers_zhiliangyaoqiu_gc"
            class="mctag">
        <MCtitle class="mctag">质量要求</MCtitle>
        <div class="content">
            <h2 class="title">质量要求</h2>
            <p class="desc">请选择产品类型，选择不上限</p>
            <ul mcname="zhiliangyaoqiu" class="selecttagul">
                <li mcname="shichanghuo" class="tagli" v-bind:class="{on:(shichanghuo&&shichanghuo!='0000')}">市场货</li>
                <li mcname="banjingpin" class="tagli" v-bind:class="{on:(banjingpin&&banjingpin!='0000')}">半精品</li>
                <li mcname="quanjingpin" class="tagli" v-bind:class="{on:(quanjingpin&&quanjingpin!='0000')}">全精品</li>
                <li mcname="waixiao" class="tagli" v-bind:class="{on:(waixiao&&waixiao!='0000')}">外销</li>
                <li mcname="neixiao" class="tagli" v-bind:class="{on:(neixiao&&neixiao!='0000')}">内销</li>
            </ul>
            <ul class="baseul">
                <li class="li">
                    <p class="title">组检</p>
                    <input type="number" placeholder="请输入（人）"
                           mcname="zujian"
                           class="mui-input">
                </li>
                <li class="li">
                    <p class="title">尾查</p>
                    <input type="number" placeholder="请输入（人）"
                           mcname="weicha"
                           class="mui-input">
                </li>
                <li class="li">
                    <p class="title">巡检</p>
                    <input type="number" placeholder="请输入（人）"
                           mcname="xunjian"
                           class="mui-input">
                </li>
            </ul>

            <button id="submit" type="submit"
                    class="mui-btn mui-btn-primary" style="margin: 15px auto;  display: block;">
                保存
            </button>


        </div>
        <input type="hidden" mcname="position" id="position" value=""/>
    </MCform>
    <MCform id="selectform" class="mctag ">
        <div class="backBody"></div>
        <div class="s_content">
            <h4>请选择<span class="span">（可多选）</span></h4>
            <input type="hidden" mcname="selectid"/>
            <ul mcname="onvalue" class="ulselect">
                <li class="li"><a skey="0" class="tagli" v-bind:class="{on:(onvalue&&onvalue[0]=='1')}">一道<span>x</span></a>
                </li>
                <li class="li"><a skey="1" class="tagli" v-bind:class="{on:(onvalue&&onvalue[1]=='1')}">二道<span>x</span></a>
                </li>
                <li class="li"><a skey="2" class="tagli" v-bind:class="{on:(onvalue&&onvalue[2]=='1')}">三道<span>x</span></a>
                </li>
                <li class="li"><a skey="3" class="tagli" v-bind:class="{on:(onvalue&&onvalue[3]=='1')}">四道<span>x</span></a>
                </li>
            </ul>
            <button id="savesubmit" type="submit"
                    class="mui-btn mui-btn-primary" style="margin: 15px auto;width: 90%; display: block;">
                确定
            </button>
        </div>


    </MCform>
</div>

<script type="text/javascript" src="/h5/js/all2.js"></script>
</body>
<style>
    #selectform.show {
        display: block;
    }

    #selectform {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 111;
        padding-bottom: 0;
        display: none;
    }

    #selectform .backBody {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: rgba(0, 0, 0, 0);
        transition: background-color;
        transition-duration: 0.5s;
        transition-timing-function: ease-out;
    }

    #selectform.show .backBody {
        background-color: rgba(0, 0, 0, 0.8);
    }

    #selectform .s_content h4 {
        font-size: 0.16rem;
        font-weight: 400;
        color: rgba(59, 72, 89, 1);
        line-height: 0.22rem;
        margin-left: 0.2rem;
    }

    #selectform .s_content h4 span {
        font-size: 0.16rem;
        font-weight: 400;
        color: #99A2AD;
        line-height: 0.22rem;
    }

    #selectform .s_content {
        position: absolute;
        z-index: 2;
        width: 63%;
        height: 100%;
        background-color: white;
        top: 0;
        overflow: hidden;
        right: 0;
        padding-top: 0.2rem;
        box-sizing: border-box;
        transform: translate(100%, 0);
        transition: transform;
        transition-duration: 0.5s;
        transition-timing-function: ease-out;
    }

    #selectform.show .s_content {
        transform: translate(0%, 0);
    }

    #selectform .s_content .ulselect {
        margin-left: 0.2rem;
    }

    #selectform .s_content .ulselect li {
        margin-top: 0.27rem;
    }

    #selectform .s_content .ulselect .tagli {
        border: 1px silver solid;
        border-radius: 0.2rem;
        margin-top: 0.2rem;
        padding: 0.08rem 0.1rem 0.08rem 0.1rem;
        color: #606B79;
    }

    #selectform .s_content .ulselect .tagli.on {
        color: #15A1FF;
        border: 1px #15A1FF solid;
    }

    #selectform .s_content .ulselect .tagli span {
        display: none;
    }

    #selectform .s_content .ulselect .tagli.on span {
        display: inline-block;
        margin-left: 0.05rem;
    }


</style>
<script>
    var view = new MC.View.MCform('#Form');
    var selectform = new MC.View.MCform('#selectform');
    $('#selectform .backBody').on('click', function () {
        $('#selectform').removeClass('show');
        setTimeout(function () {
            $('#selectform').hide();
        }, 500);
    });
    $('.selecttagul .tagli[mcname]').on('click', function () {
        var mcname = $(this).attr('mcname');
        var onvalue = view.vue[mcname];
        console.log(mcname, onvalue);
        selectform.vue.selectid = mcname;
        selectform.vue.onvalue = onvalue.split('');
        $('#selectform').show();
        setTimeout(function () {
            $('#selectform').addClass('show');
        }, 10);
    });
    $('#selectform .ulselect [skey]').on('click', function () {
        var key = $(this).attr('skey');
        // var
        var val = selectform.vue.onvalue[key];
        if (val == '1') {
            selectform.vue.$set(selectform.vue.onvalue, key, '0');
            //selectform.vue.onvalue[key]='0';
        } else {
            selectform.vue.$set(selectform.vue.onvalue, key, '1');
            // selectform.vue.onvalue[key]='1';
        }
    });

    $('#savesubmit').on('click', function () {
        var onvalue = selectform.vue.onvalue.join("");
        var mcname = selectform.vue.selectid;
        view.vue[mcname] = onvalue;
        $('#selectform').removeClass('show');
        setTimeout(function () {
            $('#selectform').hide();
        }, 500);
    });


</script>
</body>
</html>